<template>
    <div class="box">
        <van-nav-bar title="首页" />
        <van-tabs v-model:active="active">
            
            <search></search>
            <van-tab title="商品">
                <van-grid :border="false" :column-num="3">
                    <van-grid-item v-for="(v, i) in list" :key="i">
                        <van-image :src="v.image_src" style="width: 3.5rem; height: 3.5rem;" />
                    </van-grid-item>
                </van-grid>
            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>
    </div>
</template>

<script setup>

import { ref } from "vue"

import { catitemsApi } from '@/api/api';
import search from '@/components/search.vue';

const list = ref([])

const getList = () => {
    catitemsApi().then((res) => {
        console.log(res)
        list.value = res.data.message
    })
}
getList()

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}
</style>